<template>
    <div style="box-sizing: border-box;height: 100%;position: relative;">

        <div class="noStyle" v-show="IsShowMain" style="display: flex;justify-content: flex-end;position: absolute;width: 100%;
        z-index: 999999;padding-right: 12px;padding-top: 8px ;box-sizing: border-box;">

            <!-- <div ref="mytopimg"  style="height:190px;border-radius: 5px;width: 100%;position: relative;padding: 8px;box-sizing: border-box;
            border-radius: 5px;overflow: hidden;">
              <img style="width: 100%;height: 100%;border-radius: 5px;" src="bgc6.jpg" mode="" />
           
              <div class="btn" style="padding: 5px;border: 0;background-color: #f6f2f2;border-radius: 5px;padding: 4px 7px;
            display: flex;justify-content: center;align-items: center;margin: 5px;position: absolute;right: 8px;top: 8px;" @click="MainSet">
                <svg style="width: 20px;height: 20px;" t="1687879477572" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2419" width="32" height="32">
                    <path
                        d="M179.7734375 907.5078125c-21.09375 21.09375-58.0078125 58.0078125-42.1875-31.640625C174.5 722.9375 554.1875 148.1328125 870.59375 90.125c89.6484375 0-163.4765625 216.2109375-163.4765625 216.2109375s89.6484375 10.546875 147.65625-47.4609375c-36.9140625 179.296875-200.390625 179.296875-242.578125 195.1171875 47.4609375 5.2734375 84.375 31.640625 163.4765625 5.2734375-21.09375 52.734375-89.6484375 116.015625-358.59375 174.0234375-116.015625 42.1875-216.2109375 253.125-237.3046875 274.21875z m0 0"
                        p-id="2420"></path>
                </svg>写文章
            </div>

            </div> -->


            <div class="btn" style="padding: 5px;border: 0;background-color: #f6f2f2;border-radius: 5px;padding: 4px 7px;
            display: flex;justify-content: center;align-items: center;margin: 5px;" @click="MainSet">
                <svg :style="`width: 20px;height: 20px;fill: ${IsdarkMode?`${SelectMycolor}`:'#000000'}`" t="1687879477572" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2419" width="32" height="32">
                    <path
                        d="M179.7734375 907.5078125c-21.09375 21.09375-58.0078125 58.0078125-42.1875-31.640625C174.5 722.9375 554.1875 148.1328125 870.59375 90.125c89.6484375 0-163.4765625 216.2109375-163.4765625 216.2109375s89.6484375 10.546875 147.65625-47.4609375c-36.9140625 179.296875-200.390625 179.296875-242.578125 195.1171875 47.4609375 5.2734375 84.375 31.640625 163.4765625 5.2734375-21.09375 52.734375-89.6484375 116.015625-358.59375 174.0234375-116.015625 42.1875-216.2109375 253.125-237.3046875 274.21875z m0 0"
                        p-id="2420"></path>
                </svg>写文章
            </div>

        </div>
        <div class="journalbox" @scroll="scrollIsMove" v-if="IsShowMain" @click.capture="Global"
            style="padding: 8px;height: calc(100%);width: 100%;overflow: auto;overflow-x: hidden;padding-top:8px;position: relative;">

            <div ref="mytopimg"
                style="height:190px;border-radius: 5px;width: 100%;box-sizing: border-box;
            border-radius: 5px;overflow: hidden;background:url(bgc6.jpg);background-size: 100% 100%;margin-bottom: 16px;">
            </div>

            <div class="sigitembox" :id="item.contentid" :data-contentid="item.contentid"
                v-for="(item, index) in JournalData" :key="index" style="width: 100%;margin-bottom: 40px;"
                @mouseenter="IsMoveThisIndex = index" @mouseleave="IsMoveThisIndex = -1">
                <div style="display: flex;width: 100%;">
                    <img @click.stop="GotoUser(item)" :src="item.userimgurl" alt=""
                        style="width: 40px;height: 40px;border-radius: 5px;">
                    <div style="width: calc(100% - 40px);padding-left: 10px;padding-right: 10px;box-sizing: border-box;">

                        <div style="display: flex;justify-content: space-between;height: 40px;margin-bottom: 8px;">
                            <div style="display: flex;flex-direction: column;justify-content: space-between;">
                                <div style="display: flex;">
                                    <span style="color: black;font-size: 16px;margin: 0;font-weight: 700;">{{ item.username
                                    }}</span>
                                    <img v-if="item.isvip == 1" class="noStyle vipbox" style="width: 17px;height: 17px;margin: 0 2px;" src="https://file.xiaoshagua.top/font/20210412060958.png" alt="">
                                    <span style="margin-right: 4px;
                                                        font-family: KaiTi;
                                                        color: #fbf2f1;
                                                        font-size: 12px;
                                                        padding: 1px 3px;
                                                        margin-left: 3px;
                                                        border-radius: 4px;
                                                        display: flex;
                                                        align-items: center;
                                                        justify-content: center;
                                                        background-color:#ecb1ac;
                                                      " v-show="item.top == 99">原创</span>
                                </div>

                                <div style="font-size: 12px;color: #8d8b8b;">{{ formatTime(item.time) }}</div>
                            </div>
                            <div>
                                <!-- <div v-show="ThisLoginuuId == item.useruuid && IsMoveThisIndex == index" class="edit"
                                    @click="EditBook(item, index)">
                                    <svg style="width: 16px;height: 16px;" t="1687863077069" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="29873" width="32" height="32">
                                        <path
                                            d="M946.176 896a34.304 34.304 0 0 1 0 68.608H77.824a34.304 34.304 0 0 1 0-68.608h868.352z m0-622.08L401.92 818.176 189.44 839.68l21.504-211.968 473.088-473.088 71.168-71.168c31.744-31.744 87.552-31.744 119.296 0l71.168 71.168c15.872 15.872 24.576 37.376 24.576 59.904 0.512 22.016-8.192 43.52-24.064 59.392zM266.24 762.88l103.936-10.752 431.616-431.616-93.696-93.696L276.48 658.432 266.24 762.88zM815.104 127.488c-4.096 0-8.192 1.536-11.264 4.608l-46.592 46.592 93.696 93.696 46.592-46.592c6.144-6.144 6.144-16.384 0-22.528l-71.168-71.168c-3.072-3.072-7.168-4.608-11.264-4.608z"
                                            p-id="29874"></path>
                                    </svg>

                                </div> -->



                                <div v-show="ThisLoginuuId == item.useruuid && IsMoveThisIndex == index" class="edit"
                                    style="background-color: #eb7651;position: relative;width: 150px;">


                                    <div style="background-color: #e6e5e5; padding: 0px 5px;border-radius: 5px;width: 16px;;height: 15px;display: flex;align-items: center;
                            justify-content: center;position: absolute;right: 0;" @click="MoreSeting = true">
                                        <svg :style="`width: 16px;height: 15px;fill:${IsdarkMode?`${SelectMycolor}`:'#000000'}`" t="1688434710308" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="6523" width="32" height="32">
                                            <path
                                                d="M186.181818 418.909091a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z m325.818182 0a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z m325.818182 0a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z"
                                                 p-id="6524"></path>
                                        </svg>

                                    </div>

                                    <div v-show="MoreSeting" @mouseleave="MoreSeting = false">
                                        <div class="noStyle" style="position: absolute;background-color: #333333;width: 15px;height: 15px;right: 6px;transform: rotate(45deg);
                            top:23px;z-index: 1;"></div>
                                        <div class="noStyle" style="position: absolute;right: 0;width: 90px;height: 22px;background-color: #333333;top: 25px;z-index: 2;;display: flex;align-items: center;
                          justify-content: center;color: #fcfcfc;border-radius: 5px;padding:2px 1px;">
                                            <div class="noStyle" style="height: 100%;display: flex;align-items: center;"
                                                @click="EditBook(item, index)">
                                                <svg  style="width: 14px;height: 14px;fill: #fcfcfc; !important"
                                                    t="1687863077069" class="icon noStyle" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="29873" width="32" height="32">
                                                    <path
                                                        d="M946.176 896a34.304 34.304 0 0 1 0 68.608H77.824a34.304 34.304 0 0 1 0-68.608h868.352z m0-622.08L401.92 818.176 189.44 839.68l21.504-211.968 473.088-473.088 71.168-71.168c31.744-31.744 87.552-31.744 119.296 0l71.168 71.168c15.872 15.872 24.576 37.376 24.576 59.904 0.512 22.016-8.192 43.52-24.064 59.392zM266.24 762.88l103.936-10.752 431.616-431.616-93.696-93.696L276.48 658.432 266.24 762.88zM815.104 127.488c-4.096 0-8.192 1.536-11.264 4.608l-46.592 46.592 93.696 93.696 46.592-46.592c6.144-6.144 6.144-16.384 0-22.528l-71.168-71.168c-3.072-3.072-7.168-4.608-11.264-4.608z"
                                                        p-id="29874"></path>
                                                </svg> 
                                                <span class="noStyle" style="font-size: 12px;font-family: Kaiti;">编辑</span>
                                            </div>
                                            <div class="noStyle" style="margin-left: 6px;height: 100%;display: flex;align-items: center;"
                                                @click="DeleteJournal(item)">

                                                <svg style="width: 14px;height: 14px;fill: #fcfcfc; !important"
                                                    t="1688436574917" class="icon noStyle" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="10570" width="32" height="32">
                                                    <path
                                                        d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
                                                        fill="#ffffff" p-id="10571"></path>
                                                    <path
                                                        d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
                                                        fill="#ffffff" p-id="10572"></path>
                                                    <path
                                                        d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
                                                        fill="#ffffff" p-id="10573"></path>
                                                    <path
                                                        d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
                                                        fill="#ffffff" p-id="10574"></path>
                                                </svg>
                                                <span class="noStyle" style="font-size: 12px;font-family: Kaiti;">删除</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                            </div>
                        </div>

                        <div>
                            <VueMarkdown class="markdown-body" :source="item.content"></VueMarkdown>
                        </div>

                        <div style="display: flex;align-items: center;margin-top: 10px;">
                            <svg style="width: 15px;height: 15px;" t="1687884619436" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="32" height="32">
                                <path
                                    d="M512 416a96 96 0 1 1-96 96 96 96 0 0 1 96-96m0-64a160 160 0 1 0 160 160 160 160 0 0 0-160-160z"
                                    fill="#8d8b8b" p-id="9430"></path>
                                <path
                                    d="M512 298.88c188.64 0 288 113.92 366.72 213.12C800 611.36 700.64 725.12 512 725.12S224 611.36 145.28 512C224 412.64 323.36 298.88 512 298.88m0-64C264.64 234.88 147.52 406.56 64 512c83.52 105.44 200.64 277.12 448 277.12S876.48 617.44 960 512c-83.52-105.44-200.64-277.12-448-277.12z"
                                    fill="#8d8b8b" p-id="9431"></path>
                            </svg>
                            <span style="font-size: 12px;color: #8d8b8b;margin-left: 3px;">浏览{{ item.browsecount }}次</span>
                        </div>
                        <!-- <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                            <span style="font-size: 13px;color: #576b95;">发布于{{ item.provice }}</span>
                        </div> -->
                        <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
                            <div style="font-size: 13px;color: #8d8b8b;margin: 5px 0;">发布于{{ item.provice }}</div>

                            <div style="display: flex;flex-direction: column;">
                                <div style="display: flex;align-items: center;">
                                    <div style="display: flex;align-items: center;margin-right: 10px;" class="commentbox"
                                        @click="GetComment(item.contentid, 0, 5, -1)">

                                        <svg style="width: 16px;height: 16px;" t="1687888312660" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="10822" width="32" height="32">
                                            <path
                                                d="M184.32 891.667692c-12.603077 0-25.206154-2.363077-37.809231-7.876923-37.021538-14.966154-59.864615-49.624615-59.864615-89.009231v-275.692307c0-212.676923 173.292308-385.969231 385.969231-385.969231h78.76923c212.676923 0 385.969231 173.292308 385.969231 385.969231 0 169.353846-137.846154 307.2-307.2 307.2H289.083077l-37.021539 37.021538c-18.904615 18.116923-43.323077 28.356923-67.741538 28.356923zM472.615385 195.347692c-178.018462 0-322.953846 144.935385-322.953847 322.953846v275.692308c0 21.267692 15.753846 29.144615 20.48 31.507692 4.726154 2.363077 22.055385 7.876923 37.021539-7.08923l46.473846-46.473846c6.301538-6.301538 14.178462-9.452308 22.055385-9.452308h354.461538c134.695385 0 244.184615-109.489231 244.184616-244.184616 0-178.018462-144.935385-322.953846-322.953847-322.953846H472.615385z"
                                                fill="#7F7F7F" p-id="10823"></path>
                                            <path
                                                d="M321.378462 512m-59.076924 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                                fill="#BFBFBF" p-id="10824"></path>
                                            <path
                                                d="M518.301538 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                                fill="#BFBFBF" p-id="10825"></path>
                                            <path
                                                d="M715.224615 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153846 0 59.076923 59.076923 0 1 0-118.153846 0Z"
                                                fill="#BFBFBF" p-id="10826"></path>
                                        </svg>

                                        <span style="margin-left: 3px;font-size: 13px;">{{ item.commentcount }}</span>
                                    </div>
                                    <div class="ilke" style="display: flex;align-items: center;"
                                        @click="ILike(item, index)">
                                        <svg style="width: 16px;height: 16px;fill: #8d8b8b !important;" t="1687860314249"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                            <path
                                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                p-id="2316"></path>
                                        </svg>
                                        <span style="margin-left: 3px;font-size: 13px;">{{ item.like }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-show="IsShowMasterComment && IsMovClickThisIndex == item.contentid"
                            style="display: flex;position: relative;">
                            <input placeholder="留下你的精彩评论吧!" @click="MasterInput" v-model="ThisCommentMsg" type="text"
                                style="outline: none;border: 1px solid #a8a6a6;border-radius: 4px;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;font-family: Kaiti;">
                            <div style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                                <svg @click="ReplyMsg(item, 1, null, null)"
                                    :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`" t="1687921276844"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    p-id="40922" width="32" height="32">
                                    <path
                                        d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                        p-id="40923"></path>
                                </svg>
                            </div>
                        </div>

                        <!-- 评论 -->
                        <div v-for="(parentitem, parentindex) in Comments.filter(r => r.level == 1)" :key="parentindex"
                            style="width: 100%;" v-show="(IsShowCommentBox && IsMovClickThisIndex == item.contentid) && IsMasterMerge == false"
                            @click="IsShowCommentBox = true" :id="parentitem.commentid" :ref="parentitem.commentid">

                            <div style="display: flex;width: 100%;padding: 5px 0">
                                <img @click.stop="GotoUser(parentitem)" :src="parentitem.userimgurl" alt=""
                                    style="width: 30px;height: 30px;border-radius: 5px;">
                                <div
                                    style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">
                                    <div style="margin-bottom: 3px;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;">{{
                                        parentitem.username }}</div>
                                    <div style="margin-bottom: 3px;font-size: 15px;margin-bottom: 6px;">{{
                                        parentitem.comment }}</div>
                                    <div style="display: flex;margin-bottom: 3px;">
                                        <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">{{
                                            formatTime(parentitem.time) }}</span>
                                        <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">·{{
                                            parentitem.provice }}</span>
                                    </div>
                                    <div style="display: flex;align-items: center;margin-top: 3px;" class="commentbox">
                                        <div @click="ThisCommentIndex = parentitem.commentid" style="display: flex;align-items: center;">
                                            <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;"
                                                t="1687914841171" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="36245" width="32" height="32">
                                                <path
                                                    d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                                    p-id="36246"></path>
                                            </svg>
                                            <span style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                                        </div>

                                        <div class="ilke" style="display: flex;align-items: center;margin-left: 12px;"
                                            @click="CommentthisILike(item, 0, parentitem, null)">
                                            <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;"
                                                t="1687860314249" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                                <path
                                                    d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                    p-id="2316"></path>
                                            </svg>
                                            <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{
                                                parentitem.commentlike }}</span>
                                        </div>


                                    </div>
                                    <div v-show="ThisCommentIndex == parentitem.commentid"
                                        style="display: flex;position: relative;">
                                        <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                            style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">
                                        <div @click="ReplyMsg(item, 2, parentitem, null)"
                                            style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                                            <svg :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`"
                                                t="1687921276844" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="40922" width="32" height="32">
                                                <path
                                                    d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                                    p-id="40923"></path>
                                            </svg>
                                        </div>
                                    </div>




                                    <!-- 子级 -->
                                    <div @click="GetSlavecomment(item.contentid, parentitem.commentid, 0, 5, -1, -1)"
                                        v-show="parentitem.slavecommentcount != 0 && SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid) == 0 || parentitem.slavecommentcount != 0 && IsSlaveMerge"
                                        class="slavecomment" style="margin-left: 0px;font-size: 12px;color: #8d8b8b;display: flex;align-items: center;
                                    padding: 5px 0;">
                                        <div style="display: flex;align-items: center;">
                                            <span style="">— 展开 {{ parentitem.slavecommentcount }} 条回复 </span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                        
                                    </div>

                                    <div style="border-radius: 4px;overflow: hidden;font-family: Kaiti;" v-show="IsSlaveMerge == false">
                                        <div v-for="(item2, index) in SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid)"
                                            :key="index" style="display: flex; background-color: #e4e3e3;width: 100%;padding: 8px;width: 100%;border-radius: 5px;margin: 0;
                                            margin-top: 4px;box-sizing: border-box;" :id="item2.commentid"
                                            :ref="item2.commentid">
                                            <img @click.stop="GotoUser(item2)" :src="item2.userimgurl" alt=""
                                                style="width: 30px;height: 30px;border-radius: 5px;">
                                            <div
                                                style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">

                                                <div
                                                    style="display: flex;align-items: center;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;height: 20px;">
                                                    <div
                                                        style="margin-bottom: 3px;height: 100%;display: flex;align-items: center;">
                                                        {{ item2.username }}</div>
                                                    <div v-show="RelationUser(FirstParentComment(item2.parentid)) != ''"
                                                        style="display: flex;align-items: center;margin-bottom: 3px;height: 100%;">
                                                        <span
                                                            style="margin: 0 2px;font-size: 12px;display: flex;height: 100%;line-height: 100%;align-items: center;">
                                                            
                                                            
                                                            <svg style="width: 15px;height: 15px;" t="1689093098132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4897" width="16" height="16"><path d="M701.44 512L322.56 796.587V227.413L701.44 512z" fill="#333333" p-id="4898"></path></svg>
                                                        
                                                        </span>
                                                        <span
                                                            style="display: flex;height: 100%;;align-items: center;">{{ RelationUser(FirstParentComment(item2.parentid))
                                                            }}</span>
                                                    </div>
                                                </div>

                                                <div style="margin-bottom: 6px;font-size: 15px;">{{ item2.comment }}</div>
                                                <div style="display: flex;margin-bottom: 3px;color: #8d8b8b;">
                                                    <span style="font-size: 12px;font-family: Kaiti;">{{ item2.provice
                                                    }}</span>
                                                    <span style="font-size: 12px;font-family: Kaiti;">·{{
                                                        formatTime(item2.time) }}</span>
                                                </div>
                                                <div style="display: flex;align-items: center;margin-top: 3px;"
                                                    class="commentbox">
                                                    <div @click="ThisCommentIndex = item2.commentid" style="display: flex;align-items: center;">
                                                        <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;"
                                                            t="1687914841171" class="icon" viewBox="0 0 1024 1024"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36245"
                                                            width="32" height="32">
                                                            <path
                                                                d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                                                p-id="36246"></path>
                                                        </svg>
                                                        <span
                                                            style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                                                    </div>

                                                    <div class="ilke"
                                                        style="display: flex;align-items: center;margin-left: 12px;"
                                                        @click="CommentthisILike(item, 1, parentitem, item2)">
                                                        <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;"
                                                            t="1687860314249" class="icon" viewBox="0 0 1024 1024"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2315"
                                                            width="32" height="32">
                                                            <path
                                                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                                p-id="2316"></path>
                                                        </svg>
                                                        <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{
                                                            item2.commentlike }}</span>
                                                    </div>
                                                </div>
                                                <div v-show="ThisCommentIndex == item2.commentid"
                                                    style="display: flex;position: relative;">
                                                    <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                                        style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">

                                                    <div @click="ReplyMsg(item, 2, parentitem, item2)"
                                                        style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                                                        <svg :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`"
                                                            t="1687921276844" class="icon" viewBox="0 0 1024 1024"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40922"
                                                            width="32" height="32">
                                                            <path
                                                                d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                                                p-id="40923"></path>
                                                        </svg> 
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="loadcomment" v-show="IsSlaveMerge == false && SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid).length >= 1"
                                        style="font-size: 12px;color: #8d8b8b;width: 100%;text-align: center;margin-bottom: 5px;margin-top: 5px;display: flex;">
                                        

                                        <div style="display: flex;align-items: center;margin-right: 15px;" @click="LoadMoreGetSlavecomment(item.contentid, parentitem.commentid, -1, -1)"
                                        v-show="SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid).length >= 5 && IsSlaveCommentLoadOrNull">
                                            <span style="">展开更多评论 </span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                        <div style="display: flex;align-items: center;" @click="IsSlaveMerge = true">
                                            <span>收起</span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important; transform: rotate(180deg);" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="loadcomment" v-show="IsMasterMerge == false && Comments.filter(r => r.contentid == item.contentid).length >= 1"
                            style="font-size: 12px;color: #8d8b8b;width: 100%;text-align: center;margin-bottom: 5px;display: flex;">
                                
                        
                                <div style="display: flex;align-items: center;margin-right: 15px;" @click="LoadMoreMasterComment(item.contentid, -1)"
                                v-show="Comments.filter(r => r.contentid == item.contentid).length >= 5 && IsMasterCommentLoadOrNull">
                                            <span style="">展开更多评论 </span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                        <div style="display: flex;align-items: center;" @click="IsMasterMerge = true">
                                            <span>收起</span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important; transform: rotate(180deg);" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                        </div>
                        <div :style="`${IsdarkMode?'border-bottom: 1px solid #454546;width: 100%;':'border-bottom: 1px solid #e6e5e5;width: 100%;'}`"></div>
                    </div>
                </div>

            </div>

            <div style="width: 100%;text-align: center;color: gray;padding-bottom: 16px;font-size: 13px;">
                <div class="loadMore" v-if="IsLoadOrNull" @click="LoadMore">加载更多</div>
                <span v-else>暂无更多...</span>
            </div>
        </div>


        <div v-else style="height: 100%;">

            <input type="hidden" v-model="EditIndex">

            <div style="display: flex;justify-content: flex-end;align-items: center;height: 30px;box-sizing: border-box;">
                <input ref="inputfile" type="file" accept="image/*" @change="handleFileChange" name="" id="fi" value=""
                    style="display: none;" />
                <div style="display: flex;align-items: center;padding: 5px;">
                    <select name="" id="" v-model="SelectEDITOR">
                        <option value="0">HTML编辑器</option>
                        <option value="1">Markdown编辑器</option>
                    </select>
                </div>
                <div style="display: flex;align-items: center;padding: 5px;">
                    <input type="checkbox" name="" v-model="IsTop" id="isTop">
                    <label for="isTop">原创</label>
                </div>
                <div class="btn" style="padding: 5px;border: 0;" @click="Cancel">取消</div>
                <div class="btn" style="padding: 5px;border: 0;" @click="PreviewMd">{{
                    !IsShowpreview ?
                    '预览' : '修改'
                }}</div>

                <div v-if="IsPublishOREdit" class="btn" style="padding: 5px;border: 0;" @click="Publish">发布</div>
                <div v-else class="btn" style="padding: 5px;border: 0;" @click="EditPublish">保存</div>

            </div>
            <div class="editcontent" style="height:calc(100% - 36px);box-sizing: border-box;">
                <div v-show="!IsShowpreview" style="height: 100%;">
                    <quill-editor v-if="SelectEDITOR == 0" style="height: 100%;;" @paste="onPaste($event)"
                        @input="handleEditorInput($event)" ref="myQuillEditor" v-model="content" :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
                        @change="handleChange($event)" />
                    <textarea v-else id="edittextarea" style="height: 100%;width: 100%;outline: none;resize: none;background-color: #f5f5f5;border: 0;
                    border-top: 1px solid var(--journal-edittar);padding: 8px;box-sizing: border-box;" v-model="content"
                        placeholder="请在这里输入"></textarea>
                </div>
                <div v-show="IsShowpreview" id="preview"  style="height: 100%;;overflow-y: auto;box-sizing: border-box;">
                    <VueMarkdown class="markdown-body" :source="content"></VueMarkdown>
                </div>
            </div>
        </div>




    </div>
</template>
  
<script>
// https://blog.csdn.net/HH18700418030/article/details/121017110   使用案例
import axios from "axios";
import VueMarkdown from "vue-markdown";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";

import Quill from 'quill'
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import Video from '../quill/video.js';

import { ImageDrop } from 'quill-image-drop-module' // 图片拖动组件引用
import ImageResize from 'quill-image-resize-module' // 图片缩放组件引用
Quill.register('modules/imageDrop', ImageDrop) // 注册
Quill.register('modules/imageResize', ImageResize) // 注册

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'],                     //引用，代码块
    [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
    [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
    [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
    [{ 'direction': 'rtl' }],                         // 文字输入方向
    [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
    [{ 'color': [] }, { 'background': [] }],          // 颜色选择
    [{ 'font': [] }], // 字体
    [{ 'align': [] }],    // 居中
    ['clean'],            // 清除样式,
    ['link', 'image', 'video'],  // 上传图片、上传视频
    // 自定义的工具栏选项
    //['my-custom-button'] // 加入自定义按钮
]




export default {
    props: [ 
    "IsdarkMode",
    "SelectMycolor"
  ],
    components: {
        quillEditor, VueMarkdown
    },
    data() {
        return {
            MoreSeting: false, //更多设置
            // 富文本编辑器默认内容
            content: '',
            PageCount: 0,
            IsLoadOrNull: true, //是否加载帖子
            IsMasterCommentLoadOrNull: true,
            IsSlaveCommentLoadOrNull: true,
            IsSlaveMerge:false, //子集评论是否合并
            IsMasterMerge:false, //子集评论是否合并
            SelectEDITOR: 0,
            JournalData: [],
            IsShowpreview: false,
            IsShowMain: true,
            IsTop: false,
            IsShowMasterComment: false, //是否显示主评论 输入框
            IsShowCommentBox: false, //是否显示评论
            ThisCommentIndex: '',
            ThisCommentMsg: '',//评论
            Comments: [
                // {
                //     commentid: 1,
                //     content: "这是一条评论",
                //     username: "张三",
                //     userimg: 'http://localhost:7000/images/7d8f10bb-d89d-452c-89f8-d99fef7f29a9.jpg',
                //     time: "2021-01-01 00:00:00",
                //     provice: '浙江',
                //     parentid: 0,
                //     level: 1
                // },
                // {
                //     commentid: 2,
                //     content: "这是一条回复",
                //     username: "李四",
                //     userimg: 'http://localhost:7000/images/7d8f10bb-d89d-452c-89f8-d99fef7f29a9.jpg',
                //     time: "2021-01-01 00:01:00",
                //     provice: '浙江',
                //     parentid: 1,
                //     level: 2
                // },
                // {
                //     commentid: 3,
                //     content: "这是另一条回复",
                //     username: "王五",
                //     userimg: 'http://localhost:7000/images/7d8f10bb-d89d-452c-89f8-d99fef7f29a9.jpg',
                //     time: "2021-01-01 00:02:00",
                //     provice: '浙江',
                //     parentid: 1,
                //     level: 2
                // },
                // {
                //     commentid: 4,
                //     content: "你好厉害!",
                //     username: "王五",
                //     userimg: 'http://localhost:7000/images/7d8f10bb-d89d-452c-89f8-d99fef7f29a9.jpg',
                //     time: "2021-01-01 00:02:00",
                //     provice: '浙江',
                //     parentid: 2,
                //     level: 2
                // },
                // {
                //     commentid: 5,
                //     content: "...!",
                //     username: "马云",
                //     userimg: 'http://localhost:7000/images/7d8f10bb-d89d-452c-89f8-d99fef7f29a9.jpg',
                //     time: "2021-01-01 00:02:00",
                //     provice: '浙江',
                //     parentid: 4,
                //     level: 2
                // }
            ],//评论
            SlaveComments: [], //子评论
            ThisLoginuuId: '',
            visibleElements: [],
            IsMovClickThisIndex: '', //点击当前评论
            IsMoveThisIndex: 0, //移动当前
            IsPublishOREdit: true, //发布还是编辑
            EditIndex: 0, //编辑当前索引
            LoginIsVip:0,
            // 富文本编辑器配置
            editorOption: {
                placeholder: '请在这里输入',
                theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
                history: {
                    delay: 1000,
                    maxStack: 50,
                    userOnly: false
                },
                modules: {
                    imageDrop: true,      //图片拖拽
                    imageResize: {          //放大缩小
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white"
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"]
                    },
                    clipboard: {
                        matchVisual: false,  //解决 quill（vue-quill-editor） 编辑器中莫名多出一行“<p><br></p>”的过程
                        // 粘贴板，处理粘贴时候的自带样式
                        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
                    }, 
                    toolbar: {
                        container: toolbarOptions, //工具栏
                        handlers: {
                            'my-custom-button': () => {

                            },
                            'image': (value) => {
                                this.SetImg()
                            },
                            // 'video':(r)=>{

                            //     this.VideoAdd(r)
                            // }
                        }
                    }
                }

            }
        }
    },
    async created() {

        this.ThisLoginuuId = localStorage.getItem("cacheLoginuuid")

        let loginIsVip = localStorage.getItem("cacheIsVip");
        if (loginIsVip != null) { 
          this.LoginIsVip = loginIsVip;
        }
    },
    async mounted() {
       // await this.GetData(null)
        this.Codeformat();

        this.LoadFirstscrollIsMove() //进入该页面，在可视区范围内的作品增加浏览量

    },
    updated() {

    },
    computed:
    {
        RelationUser: function () {
            return function (parent) {

                let comments = this.SlaveComments.filter(r => r.commentid == parent)

                if (comments.length == 0) {
                    return ''
                }
                return comments[0].username
            };
        }
    },
    methods: {
        handleCustomMatcher(node, delta) {
        delta.ops = delta.ops.map(op => {
            return {
            insert: op.insert
            }
        })
        return delta
        },
        VideoAdd(r) {
            console.log(r);
            var url = prompt("请输入你的名字：");
            let quill = this.$refs.myQuillEditor.quill;
            let length = quill.getSelection().index; //光标位置
            quill.insertEmbed(length, "video", url);
            quill.setSelection(length + 1); //光标后移一位

            this.$refs.myQuillEditor.quill.format('Video', false)

        },
        async DeleteJournal(item) {
            let useruuid = localStorage.getItem("cacheLoginuuid")
            return await new Promise((resolve, reject) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/DeleteJournal?contentid=${item.contentid}&useruuid=${useruuid}`).then(res => {

                    if (res.data.data) {
                        this.Tips("删除成功")

                        let index = this.JournalData.findIndex(obj => obj.contentid === item.contentid);

                        if (index !== -1) {
                            // 删除索引为 index 的元素
                            this.JournalData.splice(index, 1);
                        }
                    }
                    resolve(res.data.data)

                }).catch(error => {
                    reject(error)
                    console.log(error);
                });
            })
        }, 
        GotoUser(item) { 
            let tabobj = 
            {
                 IsShowJournalBox:true,
                 IsShowFriend:false,
                 IsAbout:false,
                 IsSetItemShou:false,
                 IsShowMy:false
            }
            this.$emit("journal-GotoUser", item,tabobj); 
        },
        PreviewMd() {
            this.IsShowpreview = !this.IsShowpreview
            this.Codeformat();
        },
        FirstParentComment(parentid) {
            let thisparentid = ''
            let arr = parentid.split(',')
            if (arr.length > 1) {
                thisparentid = arr[1]
            }
            else {
                thisparentid = arr[0]
            }
            return thisparentid
        },
        FirstParentComment_Start(parentid) {
            let arr = parentid.split(',')
            return arr[0]
        },
        MasterInput() //首个文本框点击事件
        {
            this.IsShowMasterComment = true
            this.IsShowCommentBox = true


        },
        FarmatParentcommentID(parentid) {
            let arr = parentid.split(',')
            //    if(arr.length > 1)
            //    {
            //     return arr[1]
            //    }
            return arr[0]
        },
        Global()  //全局控制
        {
            this.IsShowMasterComment = false
            //this.IsShowCommentBox = false
        },
        async GetComment(contentid, pageindex, pagesize, listindex) //获取评论
        {
            this.IsMasterMerge = false

            this.IsMovClickThisIndex = contentid
            this.IsShowMasterComment = true
            this.IsShowCommentBox = true

            this.ThisCommentIndex = -999 //避免首个文本框  和子评论文本框同时显示

            this.Comments = []
            let data = await this.GetComment_DBData(contentid, pageindex, pagesize, listindex)



            if (data.length < 6) {
                this.IsMasterCommentLoadOrNull = false
            }
            else {
                this.IsMasterCommentLoadOrNull = true
            }

            data.forEach(r => {
                if (!this.Comments.some(a => a.commentid == r.commentid)) {
                    this.Comments.push(r)
                }
                else {
                    //console.log('重复对象', r);
                }

            })

            console.log('GetComment 执行完成-count', this.Comments);
            return this.Comments
        },
        async GetComment_DBData(contentid, pageindex, pagesize, listindex) //纯数据
        {

            return await new Promise((resolve, reject) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/GetMasterComment?contentid=${contentid}&pageindex=${pageindex}&pagesize=${pagesize}&listindex=${listindex}`).then(res => {


                    resolve(res.data.data)

                }).catch(error => {
                    reject(error)
                    console.log(error);
                });
            })
        },
        async LoadMoreMasterComment(contentid, listindex) {
            this.IsMovClickThisIndex = contentid
            this.IsShowMasterComment = true
            this.IsShowCommentBox = true

            let pageindex = this.Comments.length
            let pagesize = 5 + pageindex;

            let data = await this.GetComment_DBData(contentid, pageindex, pagesize, listindex)

            if (data.length == 0) {
                this.IsMasterCommentLoadOrNull = false
            }
            else {
                this.IsMasterCommentLoadOrNull = true
            }
            data.forEach(r => {
                if (!this.Comments.some(a => a.commentid == r.commentid)) {
                    this.Comments.push(r)
                }
                else {
                    //console.log('重复对象', r);
                }

            })
        },
        async GetSlavecomment(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex) {

            this.IsSlaveMerge = false

            this.IsMovClickThisIndex = contentid
            this.IsShowMasterComment = true
            this.IsShowCommentBox = true

            this.SlaveComments = []

            let data = await this.GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex)

            if (data.length == 0) {
                this.IsSlaveCommentLoadOrNull = false
            }
            else {
                this.IsSlaveCommentLoadOrNull = true
            }

            data.forEach(r => {

                if (!this.SlaveComments.some(a => a.commentid == r.commentid)) {
                    this.SlaveComments.push(r)
                }
                else {
                    //console.log('重复对象', r);
                }

            })
            console.log('GetSlavecomment 执行完成-count', this.SlaveComments);

            return this.SlaveComments
        },
        async GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex) { //纯数据

            return await new Promise((a, b) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/GetSlaveComment?contentid=${contentid}&commentparentid=${parentcommentid}&pageindex=${pageindex}&pagesize=${pagesize}&listindex=${listindex}&parentlistindex=${parentlistindex}`)
                    .then(res => {
                        a(res.data.data)

                    }).catch(error => {
                        b(error)
                        console.log(error);
                    });
            })
        },
        async LoadMoreGetSlavecomment(contentid, parentcommentid, listindex, parentlistindex) {
            this.IsMovClickThisIndex = contentid
            this.IsShowMasterComment = true
            this.IsShowCommentBox = true



            let pageindex = this.SlaveComments.length

            console.log('pageindex', pageindex);
            let pagesize = 5 + pageindex;




            let data = await this.GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex)

            console.log('IsSlaveCommentLoadOrNulldata.length', data.length);
            if (data.length == 0) {
                this.IsSlaveCommentLoadOrNull = false
            }
            else {
                this.IsSlaveCommentLoadOrNull = true
            }
            data.forEach(r => {

                if (!this.SlaveComments.some(a => a.commentid == r.commentid)) {
                    this.SlaveComments.push(r)
                }
                else {
                    //console.log('重复对象', r);
                }
            })
        },
        ReplyMsg(journal, level, parentcomment, comment) {

            let run_commentindex = 0
            let run_parentcommentindex = -1

            let Reqmastercommentindex = 0 //请求参数
            if (parentcomment != null) {
                Reqmastercommentindex = parentcomment.listindex //主评论索引
            }

            let Journalid = journal.contentid

            let receiveuuids = ''
            let receivenames = ''
            let receiveuserimgs = ''

            receiveuuids = journal.useruuid
            receivenames = journal.username
            receiveuserimgs = journal.userimgurl

            let pushcommentid = '' //当前评论id

            let pushcomment = '' //回复的评论

            let sigreceiveName = ''  //进行中评论
            let sigrelationreceiveuuid = ''

            let req = {}

            if (level == 1) {
                //req.commentid = comment.commentid
                req.comment = this.ThisCommentMsg
                req.username = localStorage.getItem('cacheLoginUserName')
                req.userimgurl = localStorage.getItem("cacheLoginUserImg")
                req.useruuid = localStorage.getItem("cacheLoginuuid")
                //req.time = comment.time
                req.parentid = '0'
                req.level = 1

                pushcommentid = journal.contentid //第一次评论（没有评论id，为文章ID）
                //顶级输入框
                this.IsShowCommentBox = true
            }
            else {
                //req.commentid = comment.commentid
                req.comment = this.ThisCommentMsg
                req.username = localStorage.getItem('cacheLoginUserName')
                req.userimgurl = localStorage.getItem("cacheLoginUserImg")
                req.useruuid = localStorage.getItem("cacheLoginuuid")

                //req.time = comment.time
                if (parentcomment != null && comment != null) {
                    req.parentid = parentcomment.commentid + ',' + comment.commentid

                    receiveuuids += ',' + parentcomment.useruuid + ',' + comment.useruuid
                    receivenames += ',' + parentcomment.username + ',' + comment.username
                    receiveuserimgs += ',' + parentcomment.userimgurl + ',' + comment.userimgurl

                    pushcommentid = parentcomment.commentid + ',' + comment.commentid //评论id

                    pushcomment = comment.comment //回复引用的评论

                    run_parentcommentindex = comment.listindex

                    sigreceiveName = comment.username
                    sigrelationreceiveuuid = comment.useruuid
                }
                else if (parentcomment != null) {
                    req.parentid = parentcomment.commentid

                    receiveuuids += ',' + parentcomment.useruuid
                    receivenames += ',' + parentcomment.username
                    receiveuserimgs += ',' + parentcomment.userimgurl

                    pushcommentid = parentcomment.commentid //评论id

                    pushcomment = parentcomment.comment //回复引用的评论

                    sigreceiveName = parentcomment.username
                    sigrelationreceiveuuid = parentcomment.useruuid
                }
                req.level = level
            }

            axios.post(this.$BaseUrl + '/api/ChatGPT/AddComment', { contentid: Journalid, masterindex: Reqmastercommentindex, comment: req }).then(async res => {

                let newpushcommentid = res.data.data.commentid
                let newpushcomment = res.data.data

                pushcommentid += ',' + newpushcommentid
                console.log('newpushcommentid', newpushcommentid);

                this.$emit('child-Tips', '发表成功!');

                run_commentindex = newpushcomment.listindex //新评论索引 

                journal.commentcount += 1

                if (level == 1) {

                    this.Comments.unshift(newpushcomment)
                }
                else {
                    this.SlaveComments.unshift(newpushcomment)
                }


                const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));


                for (let i = 0; i < uniquereceiveuuids.length; i++) {

                    if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
                        continue;
                    }


                    //发生消息通知
                    var sendobj = {
                        msgs: this.ThisCommentMsg,
                        msgType: 12,
                        sendName: localStorage.getItem('cacheLoginUserName'),
                        receiveName: sigreceiveName,
                        relationreceiveuuid: sigrelationreceiveuuid, //辨别回复的哪个人
                        contentid: journal.contentid,
                        commentid: pushcommentid,
                        comment: pushcomment,
                        runcommentindex: run_commentindex,
                        runparentcommentindex: run_parentcommentindex, //只有二级评论有效 （找到两个连接线）
                        noticetype: 1,
                        level: level,
                        content: "帖子：" + journal.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, ""),
                        imgUrl: localStorage.getItem("cacheLoginUserImg"),
                        senduuid: localStorage.getItem("cacheLoginuuid"),
                        receiveuuid: uniquereceiveuuids[i],
                        ismy: true,
                        time: "",
                    };

                    this.MyWebSockeSend(sendobj); //发送消息
                }
                this.ThisCommentMsg = ''

            }).catch(error => {

                console.error(error);
            });


        },
        // scrollIsMove() {

        //     this.$nextTick(() => {
        //         let baseelement = document.querySelector('.journalbox')
        //         var allElements = document.querySelectorAll('.sigitembox');
        //         const scrollTop = baseelement.scrollTop; //获取鼠标滚轮移动距离

        //         for (var i = 0; i < allElements.length; i++) {
        //             var element = allElements[i];

        //             if(element.className == 'sigitembox' && element.offsetTop <= scrollTop)
        //             {
        //                 if (!this.visibleElements.includes(element)) {
        //                     console.log('滚动距离顶部的偏移量：', scrollTop);
        //                     this.visibleElements.push(element);
        //                     console.log(element.offsetTop,element);
        //                     this.AddBrowse(element.dataset.contentid)
        //                 }
        //             }
        //         }
        //     })
        // },
        scrollIsMove() {

            this.$nextTick(() => {
                let baseelement = document.querySelector('.journalbox')
                var allElements = document.querySelectorAll('.sigitembox');

                var baseheight = baseelement.offsetHeight; //滚动区域高度
                const scrollTop = baseelement.scrollTop; //获取鼠标滚轮移动距离

                let sumbaseheight = baseheight + scrollTop //判断元素是否可以在可视区看到
                for (var i = 0; i < allElements.length; i++) {
                    var element = allElements[i];

                    if (element.className == 'sigitembox' && sumbaseheight > element.offsetTop) {
                        if (!this.visibleElements.includes(element)) {
                            //console.log('滚动距离顶部的偏移量：', scrollTop);
                            this.visibleElements.push(element);
                            //console.log(element.offsetTop,element);
                            this.AddBrowse(element.dataset.contentid)
                        }
                    }
                }
            })
        },
        LoadFirstscrollIsMove() {
            this.$nextTick(() => {
                let baseelement = document.querySelector('.journalbox')
                var allElements = document.querySelectorAll('.sigitembox');

                var baseheight = baseelement.offsetHeight; //滚动区域高度
                //console.log('baseheight',baseheight);

                const scrollTop = baseelement.scrollTop; //获取鼠标滚轮移动距离

                let firstloadAllhetght = 0
                for (var i = 0; i < allElements.length; i++) {

                    var element = allElements[i];

                    if (element.className == 'sigitembox') {
                        if (!this.visibleElements.includes(element) && baseheight > element.offsetTop) {
                            this.visibleElements.push(element);
                            //console.log(element.offsetTop,element);
                            this.AddBrowse(element.dataset.contentid)
                        }

                    }
                }

            })

        },
        EditBook(item, index) //编辑
        {
            this.IsPublishOREdit = false
            this.IsShowMain = false
            this.content = item.content
            this.EditIndex = item.contentid


        },
        async EditPublish() {
            console.log(this.EditIndex);

            if (this.content.substring(this.content.length - 11, this.content.length) == '<p><br></p>') {
                this.content = this.content.slice(0, -11);
            }


            let req =
            {
                userimgurl: localStorage.getItem("cacheLoginUserImg"),
                contentid: this.EditIndex,
                content: this.content,
                top: this.IsTop ? 99 : 0
            }
            axios.post(this.$BaseUrl + '/api/ChatGPT/EditJournal', req).then(async res => {

                console.log(res);
                this.IsShowMain = true
                await this.GetData(null)
                this.$emit('child-Tips', '修改成功!');
                this.content = ''
                this.IsShowpreview = false
                this.Codeformat();

            }).catch(error => {

                console.log(error);
            });
        },
        Cancel() {
            this.IsShowMain = true
            this.IsShowpreview = false

        },
        MainSet() {
            this.IsShowMain = !this.IsShowMain
            this.IsPublishOREdit = true
        },
        AddBrowse(contentid) {

            axios.get(this.$BaseUrl + `/api/ChatGPT/AddBrowse?contentid=${contentid}`).then(res => {

                let sel = this.JournalData.filter(r => r.contentid == contentid)
                if (sel.length > 0) {
                    sel[0].browsecount += 1
                }

                //this.$emit('child-Tips', '点赞成功!');

            }).catch(error => {

                console.log(error);
            });
        },
        ILike(item, index) {

            axios.get(this.$BaseUrl + `/api/ChatGPT/Ilike?contentid=${item.contentid}`).then(res => {

                item.like += 1
                this.$emit('child-Tips', '点赞成功!');

                //发生消息通知
                var sendobj = {
                    msgs: '作品❤',
                    noticetype: 0,
                    msgType: 12,
                    level: 1,
                    comment: '',
                    sendName: localStorage.getItem('cacheLoginUserName'),
                    receiveName: '',
                    contentid: item.contentid,
                    content: "帖子：" + item.content,
                    imgUrl: localStorage.getItem("cacheLoginUserImg"),
                    senduuid: localStorage.getItem("cacheLoginuuid"),
                    receiveuuid: item.useruuid,
                    ismy: true,
                    time: "",
                };

                this.MyWebSockeSend(sendobj); //发送消息

            }).catch(error => {

                console.log(error);
            });
        },
        CommentthisILike(journal, flag, parentcomment, slavecomment) //评论点赞
        {

            let run_commentindex = 0
            let run_parentcommentindex = -1

            let receiveuuids = ''

            let pushcomment = '' //回复的评论

            let pushcommentid = '' //当前评论id

            receiveuuids = journal.useruuid

            let sigreceiveName = ''  //进行中评论
            let sigrelationreceiveuuid = ''


            let req =
            {
                contentid: journal.contentid,
                masterlistindex: parentcomment.listindex,
                mastercommentid: parentcomment.commentid,
                flag: flag
            }
            if (flag == 1) {
                req.slavelistindex = slavecomment.listindex
            }

            axios.post(this.$BaseUrl + `/api/ChatGPT/CommentthisILike`, req).then(res => {

                if (flag == 0) //
                {
                    parentcomment.commentlike += 1
                    receiveuuids += ',' + parentcomment.useruuid
                    pushcommentid = parentcomment.commentid //评论id

                    pushcomment = parentcomment.comment //回复引用的评论

                    sigreceiveName = parentcomment.username
                    sigrelationreceiveuuid = parentcomment.useruuid


                    run_commentindex = parentcomment.listindex //评论索引 
                    run_parentcommentindex = -1
                }
                else //二级 - 引用对引用
                {
                    slavecomment.commentlike += 1
                    receiveuuids += ',' + parentcomment.useruuid + ',' + slavecomment.useruuid
                    pushcommentid = parentcomment.commentid + ',' + slavecomment.commentid //评论id

                    pushcomment = slavecomment.comment //回复引用的评论

                    sigreceiveName = slavecomment.username
                    sigrelationreceiveuuid = slavecomment.useruuid


                    run_commentindex = slavecomment.listindex //新评论索引 
                    run_parentcommentindex = slavecomment.listindex
                }

                const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));


                this.$emit('child-Tips', '点赞成功!');

                for (let i = 0; i < uniquereceiveuuids.length; i++) {

                    if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
                        continue;
                    }

                    //发生消息通知
                    var sendobj = {
                        msgs: '评论❤',
                        msgType: 12,
                        sendName: localStorage.getItem('cacheLoginUserName'),
                        receiveName: sigreceiveName,
                        relationreceiveuuid: sigrelationreceiveuuid, //辨别回复的哪个人
                        contentid: journal.contentid,
                        commentid: pushcommentid,
                        comment: pushcomment,
                        noticetype: 0,
                        level: 2,
                        runcommentindex: run_commentindex,
                        runparentcommentindex: run_parentcommentindex, //只有二级评论有效 （找到两个连接线）
                        content: "帖子：" + journal.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, ""),
                        imgUrl: localStorage.getItem("cacheLoginUserImg"),
                        senduuid: localStorage.getItem("cacheLoginuuid"),
                        receiveuuid: uniquereceiveuuids[i],
                        ismy: true,
                        time: "",
                    };

                    this.MyWebSockeSend(sendobj); //发送消息
                }


            }).catch(error => {

                console.log(error);
            });
        },

        async Publish() {

            //console.log(this.content);

            if (this.content.substring(this.content.length - 11, this.content.length) == '<p><br></p>') {
                this.content = this.content.slice(0, -11);
            }

            let req =
            {
                username: localStorage.getItem('cacheLoginUserName'),
                userimgurl: localStorage.getItem("cacheLoginUserImg"),
                useruuid: localStorage.getItem("cacheLoginuuid"),
                content: this.content,
                top: this.IsTop ? 99 : 0,
                isvip:localStorage.getItem("cacheIsVip")
            }
            axios.post(this.$BaseUrl + '/api/ChatGPT/Publish', req).then(async res => {

                console.log(res);
                this.IsShowMain = true
                await this.GetData(null)
                this.$emit('child-Tips', '发布成功!');
                this.content = ''
                this.IsShowpreview = false
                this.Codeformat();

            }).catch(error => {

                console.log(error);
            });



        },
        async GetData(contentid) {
            this.JournalData = []
            await new Promise((a, b) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/Get?contentid=${contentid == null ? '' : contentid}`).then(res => {


                    res.data.data.forEach(r => {

                        if (!this.JournalData.some(a => a.contentid == r.contentid)) {
                            this.JournalData.push(r)
                        }
                        else {
                            //console.log('重复对象', r);
                        }
                    })

                    this.PageCount = this.JournalData.length
                    this.IsLoadOrNull = true

                    this.scrollIsMove()

                    this.Codeformat();
                    a(res.data.data)
                }).catch(error => {

                    console.log(error);
                });
            })
        },
        async LoadMore() //加载更多
        {
            await new Promise((a, b) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/Get?pageindex=${this.PageCount}`).then(res => {


                    console.log('res.data.data', res.data.data);

                    if (res.data.data.length != 0) {
                        this.IsLoadOrNull = true
                    }
                    else {
                        this.IsLoadOrNull = false
                    }

                    // res.data.data.forEach(r => {
                    //     this.JournalData.push(r)
                    // })

                    res.data.data.forEach(r => {

                    if (!this.JournalData.some(a => a.contentid == r.contentid)) {
                        this.JournalData.push(r)
                    }
                    else {
                        //console.log('重复对象', r);
                    }
                    })

                    // this.JournalData.concat(res.data.data)


                    this.PageCount = this.JournalData.length

                    console.log('this.PageCount', this.PageCount);
                    this.scrollIsMove()

                    this.Codeformat();
                    a(res.data.data)
                }).catch(error => {

                    console.log(error);
                });
            })
        },
        SetImg() {
            this.$refs.inputfile.dispatchEvent(new MouseEvent("click"));
        },
        Codeformat() {
            //代码高亮显示
            this.$nextTick(() => {
                const blocks = this.$el.querySelectorAll("pre code");
                Array.from(blocks).forEach((block) => {
                    hljs.highlightBlock(block);
                    // 查找同级元素
                    const sibling = block.parentNode.querySelectorAll(".copy-btn");

                    if (sibling.length < 1) {
                        const button = document.createElement("span");
                        button.textContent = "";
                        button.classList.add("copy-btn");
                        block.parentNode.insertBefore(button, block.nextSibling);
                        button.addEventListener("click", (event) => {
                            // 获取要复制的数据

                            //提示
                            this.Tips("复制成功！");

                            const data = block.textContent.trim();
                            //const data = 'Hello, world!'
                            this.$copyText(data).then(
                                function () {
                                    //console.log('Copied:', data)
                                },
                                function () {
                                    //console.error('Copy failed:', data)
                                }
                            );
                        });
                    }
                });

                const pres = this.$el.querySelectorAll("pre");
                Array.from(pres).forEach((pre) => {
                    //移入事件
                    pre.addEventListener("mouseover", (event) => {
                        const blocks2 = event.target.querySelectorAll("pre code");
                        Array.from(blocks2).forEach((block2) => {
                            const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
                            Array.from(copybtns).forEach((copybtn) => {
                                copybtn.textContent = "copy";
                            });
                        });
                    });

                    //移出事件
                    pre.addEventListener("mouseleave", (event) => {
                        const blocks2 = this.$el.querySelectorAll("pre code");
                        Array.from(blocks2).forEach((block2) => {
                            const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
                            Array.from(copybtns).forEach((copybtn) => {
                                copybtn.textContent = "";
                            });
                        });
                    });
                });
            });
        },
        Tips(title) {
            const bubbleWrapper = document.createElement("div");
            bubbleWrapper.classList.add("bubble-wrapper");
            document.body.appendChild(bubbleWrapper);
            const bubble = document.createElement("div");
            bubble.classList.add("bubble");
            bubble.innerHTML = title;
            bubbleWrapper.appendChild(bubble);
            setTimeout(function () {
                bubbleWrapper.remove();
            }, 1400);
        },
        async handleFileChange(e) {

            return await new Promise(async (resolve, reject) => {
                //let file = e.target.files;
                let filename = ''
                let filetype = ''
                let file = e.target.files[0];
                filename = file.name
                filetype = file.type
                let prefilename = file.name

                let fileSizeInKB = Math.round(file.size / 1024);
                //console.log('默认size', fileSizeInKB);

                if (fileSizeInKB > 500 && fileSizeInKB <= 1000) {
                    file = await this.CanvascompressImage(e.target.files[0], 0.7, 1920, 1080);
                    fileSizeInKB = Math.round(file.size / 1024);
                    //console.log('压缩后size1', fileSizeInKB);
                }
                else if (fileSizeInKB > 1000 && fileSizeInKB <= 1500) {
                    file = await this.CanvascompressImage(e.target.files[0], 0.6, 1920, 1080);
                    fileSizeInKB = Math.round(file.size / 1024);
                    //console.log('压缩后size2', fileSizeInKB);
                }
                else if (fileSizeInKB > 1500) {
                    file = await this.CanvascompressImage(e.target.files[0], 0.5, 1920, 1080);
                    fileSizeInKB = Math.round(file.size / 1024);
                    //console.log('压缩后size3', fileSizeInKB);
                }
                // let reader = new FileReader();
                // reader.readAsDataURL(file);
                // reader.onload = () => {
                //     let dataURL = reader.result;
                //     this.LoginUserImg = dataURL
                // }; 


                const fileddl = new File([file], filename, { type: filetype });
                // 创建FormData对象 
                var formData = new FormData();
                // 添加文件到formData对象中 
                formData.append('foldername', 'journals');
                formData.append('filename', prefilename);
                formData.append('file', fileddl);
                // 发送POST请求 
                //url: 'https://api.xiaoshagua.top/api/File/Upload',
                axios.post(this.$BaseUrl + '/api/File/Upload', formData).then(res => {

                    console.log('res.data.data', res.data);

                    this.content += `<img style="border-radius: 5px;" src="${res.data.data}" alt="">`

                    resolve(this.LoginUserImg);

                }).catch(error => {
                    reject(error)
                    console.log(error);
                });

            })

        },
        CanvascompressImage(file, thisquality, maxWidth, maxHeight) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;

                    if (width > maxWidth) {
                        height *= maxWidth / width;
                        width = maxWidth;
                    }

                    if (height > maxHeight) {
                        width *= maxHeight / height;
                        height = maxHeight;
                    }

                    canvas.width = width;
                    canvas.height = height;

                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);

                    canvas.toBlob(
                        blob => {
                            resolve(blob);
                        },
                        file.type,
                        thisquality // 压缩质量，可以根据需要调整
                    );
                };

                img.onerror = reject;

                img.src = URL.createObjectURL(file);
            });
        },
        formatTime(time) {
            const now = new Date();
            const target = new Date(time);
            const diff = now.getTime() - target.getTime();
            const hour = target.getHours();
            let minute = target.getMinutes();
            const day = target.getDate();
            const week = target.getDay();

            if (minute < 10) {
                minute = "0" + minute;
            }

            if (diff < 0) {
                // 未来时间
                return target.toLocaleString();
            }

            if (diff < 60 * 1000) {
                // 一分钟内
                return "刚刚";
            }

            if (diff < 60 * 60 * 1000) {
                // 一小时内
                return `${Math.floor(diff / (60 * 1000))}分钟前`;
            }

            if (diff < 24 * 60 * 60 * 1000) {
                // 一天内
                if (hour < 12) {
                    return `上午 ${hour}:${minute}`;
                } else if (hour < 18) {
                    return `下午 ${hour - 12}:${minute}`;
                } else {
                    return `晚上 ${hour - 12}:${minute}`;
                }
            }

            if (diff < 2 * 24 * 60 * 60 * 1000) {
                // 昨天
                return `昨天 ${hour}:${minute}`;
            }

            if (diff < 7 * 24 * 60 * 60 * 1000) {
                // 一周内
                const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                return `${weeks[week]} ${hour}:${minute}`;
            }

            if (now.getFullYear() === target.getFullYear()) {
                // 同一年
                return `${target.getMonth() + 1}月${day}日 ${hour}:${minute}`;
            } else {
                return `${target.getFullYear()}年${target.getMonth() + 1
                    }月${day}日 ${hour}:${minute}`;
            }
        },
        // 准备富文本编辑器
        onEditorReady(quill) {

            // console.log('准备富文本编辑器');
            quill.root.addEventListener(
                "paste", //粘贴事件， 把图片上传转为 url
                (evt) => {
                    if (
                        evt.clipboardData &&
                        evt.clipboardData.files &&
                        evt.clipboardData.files.length
                    ) {
                        evt.preventDefault();
                        [].forEach.call(evt.clipboardData.files, (file) => {
                            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                                return;
                            }

                            let prefilename = file.name
                            
                            const formData = new FormData();
                            formData.append('foldername', 'journals');
                            formData.append('filename', prefilename);
                            formData.append("file", file);
                            axios.post(this.$BaseUrl + '/api/File/Upload', formData).then(
                                res => {
                                    if (res.data.code == 200) {
                                        console.log(res.data.data)
                                        // window.open(res.data.data.src)
                                        let length = quill.getSelection().index; //光标位置
                                        // 插入图片地址
                                        quill.insertEmbed(length, "image", res.data.data);
                                        // 光标后移一位
                                        quill.setSelection(length + 1);
                                    } else {
                                        console.log(res.data)

                                    }
                                })

                        });
                    }
                },
                false
            )


        },
        //失去焦点事件
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        //获得焦点事件
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        //内容改变事件
        handleChange(event) {


        },


        base64ToFile(base64String, fileName) {
            const arr = base64String.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);

            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], fileName, { type: mime });
        },

        handleEditorInput(value) {
            console.log(value);

            var str = value; // 原始字符串
            var regex = /(<iframe[^>]*>)(<\/iframe>)/g; // 匹配iframe标签
            var replacement = '<div>$1$2</div>'; // 替换为带有div标签的iframe
            var result = str.replace(regex, replacement); // 执行替换操作

            // this.$refs.myQuillEditor.quill.root.innerHTML = this.$refs.myQuillEditor.quill.root.innerHTML.replace(regex, replacement); 

        },
        onPaste(event) {
            const pasteData = event.clipboardData.getData('text/plain');
            // 处理粘贴内容的逻辑

            console.log(pasteData);
        }


    }
}
</script>
<style>
.ql-my-custom-button {
    width: 40px !important;
    text-align: left;
}

.ql-my-custom-button::before {
    content: '图片';
    font-size: 13px;
    text-align: left;
}

.ilke,
.sendcommit,
.slavecomment,
.commentbox,
.loadMore,
.loadcomment,
.edit:hover {
    cursor: pointer;
}

.btn:hover {
    cursor: pointer;
}

.journalbox {
    box-sizing: border-box;
    scrollbar-width: none;
}

.journalbox img {
    max-width: 90% !important;
    border-radius: 4px;
}

.journalbox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 3px;
    /*滚动条整体宽度*/
    /*height: 1100px;*/
    /*scrollbar-arrow-color:red;*/
}

.journalbox::-webkit-scrollbar-thumb {
    /*滚动条里面的小方块*/
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

.journalbox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    /*border-radius: 5px;*/
    /*滚动条背景颜色*/
}

.editcontent::-webkit-scrollbar {
    width: 3px;
}

.editcontent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

.editcontent::-webkit-scrollbar-track {}

#edittextarea {}

#edittextarea::-webkit-scrollbar {
    width: 3px;
}

#edittextarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

#edittextarea::-webkit-scrollbar-track {}



.ql-toolbar
{
    border-left: 0px !important;
    border-right: 0px !important;
    height: 66px;
    overflow: auto;
    /* background-color: burlywood; */
}
.ql-toolbar::-webkit-scrollbar {
    width: 3px !important;
}

.ql-toolbar::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    background-color: #c3c4c6 !important;
    /*滚动条颜色*/
}

.ql-toolbar::-webkit-scrollbar-track {}



.ql-container {
    overflow: auto;
    height: calc(100% - 66px);
}

.ql-editor::-webkit-scrollbar {
    width: 3px !important;
}

.ql-editor::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    background-color: #c3c4c6 !important;
    /*滚动条颜色*/
}

.ql-editor::-webkit-scrollbar-track {}

.journalbox .markdown-body {
    line-height: 1.5;
}

.ql-container.ql-snow {
    border: 0px !important; 
}

.ql-toolbar.ql-snow
{
    border: 1px solid var(--journal-edittar) !important; 
    border-left: 0 !important;
    border-right: 0 !important;
}

.ql-editor.ql-blank::before
{
    color: var(--journal-edittar-placeholder) !important;
}


/* p 标签 */
/* .journalbox .markdown-body p{
    margin: 0;
}
#preview .markdown-body p{
    margin: 0;
} */


/* H标签 */
.journalbox .markdown-body h1,
.journalbox .markdown-body h2, 
.journalbox .markdown-body h3,
.journalbox .markdown-body h4,
.journalbox .markdown-body h5,
.journalbox .markdown-body h6{
    margin: 6px 0 !important;
}

#preview .markdown-body h1,
#preview .markdown-body h2, 
#preview .markdown-body h3,
#preview .markdown-body h4,
#preview .markdown-body h5,
#preview .markdown-body h6{
    margin: 6px 0 !important;
}

/* #preview .markdown-body p{
    margin: 0;
} */

.gaog {
    background-color: aqua !important;
    ;
    border-radius: 20px !important;
    width: 400px !important;
    height: 300px !important;
    display: inline-block !important;
}

/* .markdown-body  > .ql-video
{
    border-radius: 5px;
    width: 70%;
    height: 300px;
}
.ql-editor  > .ql-video
{
    border-radius: 5px;
    width: 70%;
    height: 300px;
} */

.ql-tooltip .ql-editing {
    z-index: 9999999 !important;
}


@media screen and (max-width: 800px) {

    .markdown-body>.ql-video {
        border-radius: 5px;
        width: 100%;
        /* height: 180px; */
        aspect-ratio: 16 / 9;
    }

    .ql-editor>.ql-video {
        border-radius: 5px;
        width: 100%;
        /* height: 180px; */
        aspect-ratio: 16 / 9;
    }
}

@media screen and (min-width: 800px) {
    .markdown-body>.ql-video {
       
        padding: 0;
        margin: 0;
        border-radius: 5px;
        /* width: 533px;
        height: 300px; */
        width: 63%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .ql-editor>.ql-video {
        border-radius: 5px;
        /* width: 533px;
        height: 300px; */
        width: 63%;
        aspect-ratio: 16 / 9;
    }
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
    .markdown-body>.ql-video {
        padding: 0;
        margin: 0;
        border-radius: 6px;
        /* width: 360px;
        height: 203px; */
        width: 63%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .ql-editor>.ql-video {
        border-radius: 5px;
        /* width: 360px;
        height: 203px; */
        width: 63%;
        aspect-ratio: 16 / 9;
    }
}

.ql-container>.ql-tooltip {
    left: 50% !important;
    bottom: 45% !important;
    height: 40px;
    transform: translate(-50%);
}

/* 设置朋友圈图片展示最大宽度 */
.sigitembox  img
{
    /* max-width: 70% !important; */
    max-height: 70vh;
}

.quill-editor img,.editcontent img
{
    max-height: 70vh;
}

.markdown-body img:hover
{
    cursor: zoom-in;
}

/* .ql-container .ql-editor >  iframe{
    display: inline-block;
 } */



 

</style>
  